<template>
	<view>
		<u-popup
			:show="showChooseAvatar"
			mode="bottom"
			:round="10"
			@close="close"
			@open="open"
			closeable
			:closeOnClickOverlay="false"
		>
			<view class="getphonebox">
				<button
					color="#588bf3"
					type="default"
					plain
					class="chooseAvatarbutton"
					openType="chooseAvatar"
					@chooseavatar="chooseavatar"
					:customStyle="getPhoneNumberCustomStyle"
				>
					<u-avatar
						fontSize="18"
						size="60"
						:src="avatar"
						randomBgColor
						v-if="avatar"
					/>
					<view
						class="avatar_default"
						v-else
					>
						<u-avatar
							fontSize="18"
							size="50"
							defaultUrl="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/6d481c4ab61948a8931e430af01fcc16.png"
							randomBgColor
						></u-avatar>
						<view>
							<u-text
								text="设置头像"
								size="24rpx"
								color="#ccc"
								align="center"
							/>
						</view>
					</view>
				</button>
				<view class="nickName">
					<u-input
						type="nickname"
						placeholder="请设置昵称"
						border="none"
						@change="nickNameChange"
						v-model="nickName"
						:customStyle="inputCustomStyle"
						clearable
						placeholderClass="nicknamePlaceholderClass"
					/>
				</view>
				<u-button
					text="提交签到"
					shape="circle"
					color="#588bf3"
					:customStyle="getPhoneNumberCustomStyle"
					@click="submit"
					:loading="profileHotState.loading"
				/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	import caches from "@/config/caches.js"
	import { baseUrl } from "@/config/minRequest.js"
	import { updateCustomerByCustomerId } from "@/api/login.js"
	// import { CustomerMeetingSignIn } from '@/api/sign_in.js';
	import { useRequest } from "@/js_sdk/tla-useRequest/useRequest.js"
	export default {
		name: "chooseAvatar",
		computed: {
			...mapGetters(["showChooseAvatar", "userInfo"])
		},
		props: ["signData", "signUpId"],
		mounted() {},
		data() {
			return {
				inputCustomStyle: {
					height: "64rpx",
					backgroundColor: "#F0F0F0",
					padding: "0 14rpx"
				},
				getPhoneNumberCustomStyle: {
					color: "#FFF",
					width: "60%",
					height: "80rpx"
				},
				inputStyle: {
					height: "80rpx"
				},
				avatar: "",
				nickName: "",
				profileHotState: null,
				signInHotState: null
			}
		},
		methods: {
			chooseavatar(e) {
				const that = this
				uni.showLoading({
					title: "加载中"
				})
				uni.uploadFile({
					url: `${baseUrl}/fileOss/uploadFileImg`,
					filePath: e.detail.avatarUrl,
					header: {
						"Content-Type": "multipart/form-data",
						Authorization: `Bearer ${uni.getStorageSync(caches.ACCESS_TOKEN)}` || ""
					},
					name: "file",
					success(uploadResult) {
						that.avatar = JSON.parse(uploadResult.data).data
						uni.hideLoading()
					},
					fail(err) {
						uni.$u.toast(err || "上传失败")
						uni.hideLoading()
					}
				})
			},
			close() {
				this.$store.commit("SET_SHOW_CHOOSE_AVATAR", false)
			},
			open() {},
			nickNameChange(e) {},
			async submit() {
				if (!this.avatar) {
					uni.$u.toast("请设置头像")
					return
				}
				if (!this.nickName) {
					uni.$u.toast("请设置昵称")
					return
				}

				// 修改客户头像和昵称的参数
				const paramsUserInfo = {
					nickName: this.nickName,
					avatar: this.avatar,
					id: this.userInfo.id
				}
				const paramsSignIn = {
					customerId: this.userInfo.id,
					meetId: this.signData.meetId,
					meetSignId: this.signUpId,
					salesmanMobile: this.signData.salesmanMobile,
					salesmanName: this.signData.salesmanName,
					salesmanId: this.signData.salesmanId
				}
				// 签到的参数
				this.profileHotState = await useRequest(() => updateCustomerByCustomerId(paramsUserInfo))
				// this.signInHotState = await useRequest(() => CustomerMeetingSignIn(paramsSignIn));
				await this.$store.dispatch("USERINFO", { $u: uni.$u })
				await this.$emit("startSignIn")
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.getphonebox {
		height: 420rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 40rpx;
		justify-content: space-between;
	}

	.chooseAvatarbutton {
		background-color: #fff;
		// border-radius: 50px;
		margin: 0;
		padding: 0;
		border: none !important;
	}

	.nickName {
		width: 80%;
		height: 64rpx;
	}

	.avatar_default {
		width: 186rpx;
		height: 186rpx;
		background-color: #f0f0f0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	::v-deep.nicknamePlaceholderClass {
		font-size: 12rpx !important;
	}
</style>
